<link rel="stylesheet" type="text/css" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.excheck.js"></script>


<div class="layui-row layui-col-space10" style="overflow-y: hidden;position: relative;">
    <div class="layui-inline" style="height: 540px;width:96%;overflow-y: scroll;overflow-x: scroll;">
        <ul id="tree" class="ztree"  style="padding: 16px;"></ul>    
    </div>
    <button class="layui-btn"
    style="position:absolute;top:70%;right:6%;width:80px;height:30px;line-height:10px;border:none;outline:none;background-color:#1E9FFF;color:white;font-size: 17px;"
    onclick="Departmentconfirm()">确认</button>
</div>
<style>
  .layui-layer-content{
       overflow: hidden !important;
   }
</style>
<script>

/*
接口请求,所有部门的数据
*/
shared.ajaxGet('/admin/tree/getDeptTree', {}, function (res) {
    if (res) {
        generateTree(res)
    }
})


var treeObj
/*
通过部门数据生成部门树结构
*/
function generateTree(res){


    //ztree的配置
    var setting={
        check: {
            enable: true,
            chkboxType : { "Y" : "", "N" : "" },
            // Y:s:选中时,影响son
            // Y:p:选中时,影响parent
            // Y:ps:选中时,影响son和parent
            // Y:"":选中时,不影响son和parent

            // N:s:取消选择时,影响son
            // N:p:取消选择时,影响parent
            // N:ps:取消选择时,影响son和parent
            // N:"":取消选择时,不影响son和parent
        },
        view:{
            showIcon:false
        },
        data:{
            simpleData: {
                    enable: true, //该值默认为false.若为true,原始数据不用满足嵌套格式,但需要在数据中指明 id,和pid,通过idKey和pIdKey指定
                    idKey: "departmentCode",
                    pIdKey: "pdepartmentCode"
            },
            key: {
                //title 节点的hover值
                title:  "departmentName", //

                //name 节点显示源数据的哪个字段
                name: "departmentName",
                
                //checked 源数据中用于表示是否选中的字段
                // checked:"ccc"
            }
        }
    };
    
    // ztree初始化 a:dom元素 b:配置对象 c:数据源
    var zTree = $.fn.zTree.init($("#tree"), setting, res);    

    treeObj = $.fn.zTree.getZTreeObj("tree");
    
    //展开所以节点
    treeObj.expandAll(true);

    /*进入部门选择界面的初始化*/
    //因为调用api进行勾选时,对象必须是ztree对象,所以要遍历取出ztree节点,再进行筛选
    //1.从全局中读取已有的部门id
    var L_deptsIDs =[]
    
    for (let index = 0; index < $("#departmentid_addUser").val().split(";").length; index++) {
        const element = $("#departmentid_addUser").val().split(";")[index];
        L_deptsIDs.push(element)
    }

    //2.遍历所有节点,如果节点的部门表id==页面的部门id==>checkd
    var rootNodes = treeObj.getNodes();
    var allNodes = treeObj.transformToArray(rootNodes);
    for (let index = 0; index < allNodes.length; index++) {
        const element = allNodes[index];
        if (L_deptsIDs.indexOf(element.departmentCode)!=-1) {
            treeObj.checkNode(element, true, true);
            //展开所有节点
            // treeObj.expandNode(element, true, true, true);
        }
    }

}





/*点击确认按钮*/
function Departmentconfirm(){
    var checkedNode = treeObj.getCheckedNodes();
    var L_deptsNames = []
    var L_deptsIDs =[]
    for (let index = 0; index < checkedNode.length; index++) {
        const element = checkedNode[index];
        L_deptsNames.push(element.departmentName)
        L_deptsIDs.push(element.departmentCode)
        
    }
    $("#department_addUser").val(L_deptsNames.join(";"))
    $("#departmentid_addUser").val(L_deptsIDs.join(";"))

    //关闭最新的那一层
    layer.close(layer.index); 

}

    
</script>